<template>
  <div>
      <!-- 面包屑区域 -->
      <el-breadcrumb>
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动中心</el-breadcrumb-item>
          <el-breadcrumb-item>预约审核</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 头部区域  -->
      <el-row :gutter="20">
          <el-col :span="4">
              <el-input v-model="ActivityId" size="large"  placeholder="活动ID" clearable />
          </el-col>
          <el-col :span="4">
              <el-row :gutter="100">
                  <el-col :span="4">
                      <el-button type="info" size="large" @click="queryActivity">
                          <el-icon>
                              <Search />
                          </el-icon>&nbsp; 查询</el-button>
                  </el-col>
              </el-row>
          </el-col>
      </el-row>

      <!-- 列表区域 -->
      <el-table :data="activityList" stripe border style="width: 100%">
          <el-table-column type="index" label="#" width="40px" />
          <el-table-column prop="volunteer"  align="center" label="志愿者" />
          <el-table-column prop="activityId" align="center" label="活动id" />
          <el-table-column prop="title" align="center" label="活动内容" />
          <el-table-column prop="time" align="center" label="活动时间" />
          <el-table-column>
              <template v-slot="scope">
                  <el-button type="primary" @click="handleUpdate(scope.row)">同意</el-button>
                  <el-button type="danger" @click="handleRefuse(scope.row)">拒绝</el-button>
              </template>
          </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize" :page-sizes="[5, 7]"
          background layout="total, sizes, prev, pager, next, jumper" :total="query.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { getActivity, updateActivity, getOrderCheck, updateStatu } from '@/api/activityall/activity'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
export default defineComponent({
  setup () {
    onMounted(() => {
      getActivityList()
    })
    // 活动列表
    const activityList = ref([])
    // 分页的查询数据
    const query = reactive({
      currentPage: 1,
      pageSize: 5,
      total: 0,
      num: 1
    })

    const ActivityId = ref('')

    const saveRef = ref<FormInstance>()
    // 是否展开编辑页面
    const isDialogEdit = ref(false)
    const handleSizeChange = (Val:number) => {
      query.pageSize = Val
    }
    const handleCurrentChange = (Val:number) => {
      query.currentPage = Val
      getActivityList()
    }
    const handleUpdate = async (row: any) => {
      ElMessageBox.confirm(
        '次操作将同意用户参加该活动，是否确定?',
        '提示',
        {
          confirmButtonText: '确定  ',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const volunteer = { status: 2 }
          Object.assign(volunteer, row)
          volunteer.status = 2
          const { data: res } = await updateStatu(volunteer)
          if (res.code !== 200) return ElMessage.error(res.msg)
          ElMessage({
            type: 'success',
            message: '同意预约成功'
          })
          getActivityList()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作'
          })
        })
    }

    const handleRefuse = (row: any) => {
      ElMessageBox.confirm(
        '此操作将拒绝用户预约的活动，是否继续?',
        '提示',
        {
          confirmButtonText: '确定  ',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const volunteer = { status: 0 }
          Object.assign(volunteer, row)
          volunteer.status = 0
          const { data: res } = await updateStatu(volunteer)
          if (res.code !== 200) return ElMessage.error(res.msg)
          ElMessage({
            type: 'success',
            message: '拒绝预约成功'
          })
          getActivityList()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作'
          })
        })
    }

    // 查询所有的活动
    const getActivityList = async () => {
      const { data: res } = await getOrderCheck(query.num, query.currentPage, query.pageSize)
      if (res.code !== 200) return ElMessage.error('获取数据失败，请检查网络！')
      query.total = res.data.total
      activityList.value = res.data.records
    //   console.log(res)
    }
    // 根据查询信息查询
    const queryActivity = () => {
      console.log('ok')
    }

    return {
      query,
      isDialogEdit,
      handleSizeChange,
      handleCurrentChange,
      handleUpdate,
      activityList,
      getActivityList,
      saveRef,
      ActivityId,
      handleRefuse,
      queryActivity
    }
  }
})
</script>

<style lang="less" scoped>

</style>
